import React, { Fragment } from 'react'
import { StyleSheet, View, Text, Dimensions } from 'react-native'
import BasePage from 'src/pageP/base/base-page/index'
import UserInfo from './components/UserInfo'
import JobManage from './components/JobManage'
import CompanyInfo from './components/CompanyInfo'
import CompanyOtherList from './components/CompanyOtherList'
import CompanyApplyNotComplete from './components/CompanyApplyNotComplete'
import { isEmptyObjectFn } from 'src/utils/JSTypeUtil'
import { CommonToast } from 'src/utils/ToastUtil'
/* redux */
import { connect } from 'react-redux'
import {
    INIT_MAIN_PAGE_B_ACTION,
    UPDATE_MAIN_PAGE_B_ACTION,
    DO_REQUEST_MAIN_PAGE_B_ACTION
} from './store/action'
import {
    UPDATE_USERINFO_ACTION,
    DO_REQUEST_USERINFO_B_ACTION
} from 'src/store/actions/userinfo'
import {
    ScaleS,
    ScaleT,
    ONE_PIXEL,
    WIDTH,
    HEIGHT,
    STATUSBAR_HEIGHT, IS_IOS, IS_ANDROID
} from 'src/utils/ScreenUtil'
import { CustomCallPhone } from 'src/utils/PermissionsUtil'
import { ServiceTelephone } from 'src/config/index'
import AnimatedNaviBar, { MARGINTOP } from './components/AnimatedNaviBar'
import { TabView, SceneMap } from 'react-native-tab-view'
import CustomButton from 'src/components/button/CustomButton'
import SchoolRecruit from './components/SchoolRecruit'
import Animated from 'react-native-reanimated'

const mapActiontoProps = dispatch => ({
    initState() {
        dispatch(INIT_MAIN_PAGE_B_ACTION())
    },
    updateState(payload) {
        dispatch(UPDATE_MAIN_PAGE_B_ACTION(payload))
    },
    updateUserInfo(payload) {
        dispatch(UPDATE_USERINFO_ACTION(payload))
    },
    doRequestUserInfoB(...payload) {
        const promise = DO_REQUEST_USERINFO_B_ACTION(...payload)
        dispatch(promise)
        return promise.payload
    },
    doRequestMainPage(payload) {
        const promise = DO_REQUEST_MAIN_PAGE_B_ACTION(payload)
        dispatch(promise)
        return promise.payload
    }
})

@connect(
    ({ userinfo, BMineCenterStore }) => {
        return {
            userinfo,
            userinfoB: userinfo.B,
            ...BMineCenterStore
        }
    },
    mapActiontoProps
)
class BMinePage extends BasePage {
    constructor(props) {
        super(props)
        this.state = {
            // header: {},
            header: null,
            scrollY: new Animated.Value(0),
            tabIndex: 1,
            routes: [
                {
                    key: 'jobTab',
                    title: '职位'
                },
                {
                    key: 'schoolRecruit',
                    title: '校招'
                },
                {
                    key: 'companyyTab',
                    title: '企业'
                }
            ],
        }
    }

    childRender() {
        const {
            userinfo,
            userinfoB: { userName },
            top,
            post,
            company,
            member,
            navigation
        } = this.props
        const { userId, role } = userinfo
        const { routes, tabIndex } = this.state
        return (
            <Fragment>
                <View style={{ backgroundColor: '#fff', opacity: 0.8, flex: 1 }}>
                    <TabView
                        navigationState={{
                            index: tabIndex,
                            routes
                        }}
                        renderScene={this.renderScene}
                        renderTabBar={this._renderTabBar}
                        onIndexChange={this.setTabIndex}
                        initialLayout={{ width: Dimensions.get('window').width }}
                    />
                </View>
            </Fragment>
        )
    }
    renderScene = ({ route }) => {
        switch (route.key) {
            case 'jobTab':
                return (<View><Text>测试页面1</Text></View>)
            case 'schoolRecruit':
                // return (<View><Text>测试页面2</Text></View>)
                return (<SchoolRecruit />)
        }
    }
    setTabIndex = tabIndex => {
        this.setState({ tabIndex })
    }
    _renderTabBar = props => {
        return (
            <View style={styles.tabBar}>
                {props.navigationState.routes.map((route, i) => {
                    return (
                        <CustomButton
                            params={i}
                            key={i}
                            style={[styles.tabItem, i === 0 && { paddingLeft: ScaleS(0) }]}
                            onPress={this.setTabIndex}
                        >
                            <Animated.Text
                                style={i === this.state.tabIndex ? styles.pitchon : styles.common}
                            >
                                {route.title}
                            </Animated.Text>
                        </CustomButton>
                    )
                })}
            </View>
        )
    }

    componentWillFocus() {
        console.log('componentWillFocus')
        const {
            userinfo: { userId }, doRequestUserInfoB, doRequestMainPage
        } = this.props
        if (userId) {
            doRequestUserInfoB({ params: { userId } }).finally(() => {
                const {
                    userinfo: { B: { userId: userIdB } }
                } = this.props
                if (userIdB) {
                    doRequestMainPage({ userId })
                }
            })
        }
    }

    _loginJump = () => {
        const {
            userinfo: {
                userId,
                B: { userId: userIdB } = {}
            }
        } = this.props
        if (!userId) {
            this.props.navigation.navigate('OneLogin')
            return true
        }
        if (!userIdB) {
            this.props.navigation.navigate('BFirstUserInfo')
            return true
        }
    }

    _companyJump = () => {
        const {
            haveCompanyApply: { companyDone } = {},
            company: { isBlack }
        } = this.props
        if (!companyDone) {
            CommonToast('请稍后')
            return true
        }
        if (isBlack) {
            CommonToast('您的企业已被拉黑')
            return true
        }
    }

    avatorClick = () => {
        console.log('avatorClick')
        !this._loginJump() && this.props.navigation.navigate('BUserAvator')
    }

    userNameClick = () => {
        console.log('userNameClick')
        !this._loginJump() && this.props.navigation.navigate('BUserInfoBasic')
    }

    setBtnClick = () => {
        console.log('setBtnClick')
        this.props.navigation.navigate('BSetPage')
    }

    goPersonCollection = () => {
        !this._loginJump() && !this._companyJump() && this.props.navigation.navigate('BPersonCollection')
    }

    goCommunicationHistory = () => {
        !this._loginJump() && !this._companyJump() && this.props.navigation.navigate('BCommunicationHistory')
    }

    jobCellClick = index => {
        console.log('jobCellClick', index)
        !this._loginJump() && !this._companyJump() && this.props.navigation.navigate('JobPartTime', {
            type: index
        })
    }

    memberCardClick = () => {
        if (this._loginJump() || this._companyJump()) {
            return
        }
        const { member } = this.props
        if (member.remainingDay > 0) {
            this.props.navigation.navigate('BMemberDetail')
        } else {
            this.props.navigation.navigate('BMemberOpen')
        }
    }

    companyCardClick = () => {
        !this._loginJump() && !this._companyJump() && this.props.navigation.navigate('BMineCompany')
    }

    companyOtherClick = index => {
        console.log('companyOtherClick', index)
        if (index === 0) {
            CustomCallPhone(ServiceTelephone)
        } else if (index === 1) {
            !this._loginJump() && !this._companyJump() && this.props.navigation.navigate('BMemberOrder')
        }
    }
}

export default BMinePage

const styles = StyleSheet.create({
    userInfo: {
        marginTop: MARGINTOP
    },
    tabBar: {
        flexDirection: 'row',
        borderBottomWidth: ONE_PIXEL,
        marginLeft: ScaleS(20),
        marginRight: ScaleS(20),
        paddingBottom: ScaleS(9),
        marginTop: ScaleS(30),
        borderColor: 'rgba(151, 151, 151, 0.2)',
        // borderColor: 'red',
    },
    tabItem: {
        alignItems: 'center',
        marginTop: ScaleS(16),
        marginBottom: ScaleS(16),
        paddingHorizontal: ScaleS(21)
    },
    pitchon: {
        color: '#3c3c3c',
        fontSize: ScaleS(13)
    },
    common: {
        color: '#999999',
        fontSize: ScaleS(13)
    },
    borderRight: {
        borderRightWidth: ScaleS(1),
        borderColor: 'rgba(151, 151, 151, 0.4)'
    },
    scene: {
        paddingHorizontal: ScaleS(20)
    }
})
